import { defineStore } from 'pinia'
import mitt from 'mitt'
import { computed, reactive } from 'vue'
import type {
  Dialog,
  Pagination,
  Search,
  SearchForm,
  Table
} from '@/stores/employee.store.type.ts'
import type { EmployeeInfo } from '@/hooks/employee.hook.type.ts'
import { DialogType } from '@/stores/employee.store.type.ts'

export const emitter = mitt()

export const useEmployeeStore = defineStore('employee', () => {

  const search = reactive({
    form: {
      name: '',
    } as SearchForm
  } as Search)

  const table = reactive({
    height: 0,
    list: [] as EmployeeInfo[],
    total: 0,
    $name: computed((): string => search.form.name),
    $pageSize: computed((): number => pagination.pageSize),
    $currentPage: computed((): number => pagination.currentPage),
    currentEmployee: {} as EmployeeInfo
  } as Table)

  const pagination = reactive({
    pageSize: 10,
    currentPage: 1,
    $total: computed((): number => table.total)
  } as Pagination)


  const dialog = reactive({
    title: '新增',
    width: 600,
    height: 150,
    visible: false,
    form: {
      name: '',
      job: '',
      managerId: 0,
      salary: 0,
      commission: 0,
      departmentId: 0
    } as EmployeeInfo,
    $currentEmployee: computed<EmployeeInfo>((): EmployeeInfo => table.currentEmployee),
    type: DialogType.Unknown
  } as Dialog)


  return {
    search, table, pagination, dialog
  }
})
